<script setup lang="ts">
import {computed, ref, onMounted, onUnmounted} from "vue";
import {useRoute} from "vue-router";

const route = useRoute();
const default_layout = "default"
const isRouterAlive = ref(true);
console.log(route.meta.layout);

const layout = computed(() => {
  return (route.meta.layout || default_layout) + '-layout'
});

// 刷新路由组件的方法
const reloadPage = () => {
  isRouterAlive.value = false;
  setTimeout(() => {
    isRouterAlive.value = true;
  }, 100);
};

// 监听用户信息更新事件
const handleUserUpdated = () => {
  console.log('App.vue: 检测到用户信息更新，刷新组件');
  reloadPage();
};

onMounted(() => {
  window.addEventListener('userUpdated', handleUserUpdated);
});

onUnmounted(() => {
  window.removeEventListener('userUpdated', handleUserUpdated);
});

</script>

<template>
  <div id="app">
    <component :is="layout">
      <router-view v-if="isRouterAlive && $route.meta.isShow"/>
    </component>
  </div>
</template>